<template>
  
    <div class="bread-crumb-container">
        <div class="bread-crumb">
            <span class="crumb-dropdown">
                <i v-show="!panelShow" class="iconfont icon-arrow-down"></i>
                <i v-show="panelShow" class="iconfont icon-arrow-up"></i>
            </span>
            <span class="crumb-prefix" @click.prevent="showPanel" 
                v-bind:class="{highlight: panelShow}">高级筛选</span>
            <span class="crumb-prefix" 
                v-if="selectedAdmin || selectedCategory || selectedRootAdmin || selectedRootCategory"> > </span>

            <div class="crumb-container" v-if="selectedAdmin || selectedRootAdmin" @click="removeFilter('admin')">
                <span class="crumb">
                    <span v-if="selectedRootAdmin"> {{ selectedRootAdmin.name }} </span>
                    <span v-if="selectedAdmin && selectedAdmin !== selectedRootAdmin">, {{ selectedAdmin.name }}</span>
                </span>
                <div class="close">
                    <i class="iconfont icon-close"></i>
                </div>
            </div>
            <div class="crumb-container" v-if="selectedCategory || selectedRootCategory" @click="removeFilter('category')">
                <span class="crumb">
                    <span v-if="selectedRootCategory">{{ selectedRootCategory.name }}</span>
                    <span v-if="selectedCategory && selectedCategory !== selectedRootCategory">, {{ selectedCategory.name }}</span>
                </span>
                <div class="close">
                    <i class="iconfont icon-close"></i>
                </div>
            </div>

            <!-- 搜索组件附加条件 -->
            <span v-if="searchText"> > "{{ searchText }}"</span>

            <span class="clear-filter" v-if="selectedAdmin || selectedRootAdmin || selectedCategory || selectedRootCategory || searchText" @click.prevent="clearFilter">清空筛选</span>
        </div>

    </div>

</template>

<script>
import Bus from '../../utils/event_bus'
export default {

    props: {
        
    },

    data() {
        return {
            selectedRootAdmin: null,
            selectedAdmin: null,
            selectedRootCategory: null,
            selectedCategory: null,
            searchText: null,
            panelShow: false,
        };
    },

    methods: {

        clearFilter() {
            this.selectedAdmin = null;
            this.selectedRootAdmin = null;
            this.selectedCategory = null;
            this.selectedRootCategory = null;
            this.searchText = null;
            Bus.$emit('filter-bread-crumb-clear-filter');
        },

        removeFilter(filter) {

            if (filter === 'admin') {
                this.selectedAdmin = null;
                this.selectedRootAdmin = null;
                Bus.$emit('filter-bread-crumb-remove-filter', 'admin');
            }

            if (filter === 'category') {
                this.selectedCategory = null;
                this.selectedRootCategory = null;
                Bus.$emit('filter-bread-crumb-remove-filter', 'category');
            }

        },

        showPanel() {
            this.panelShow = !this.panelShow;
            Bus.$emit('filter-bread-crumb-toggle-panel');
        }

    },

    created() {
        Bus.$on('filter-panel-select-admin', (selectedAdmin, selectedRootAdmin) => {
            this.selectedAdmin = selectedAdmin;
            if (selectedRootAdmin) {
                this.selectedRootAdmin = selectedRootAdmin;
            }
        });

        Bus.$on('filter-panel-unselect-admin', () => {
            this.selectedAdmin = null;
            this.selectedRootAdmin = null;
        });

        Bus.$on('filter-panel-unselect-subadmin', () => {
            this.selectedAdmin = null;
        });

        Bus.$on('filter-panel-select-category', (selectedCategory, selectedRootCategory) => {
            this.selectedCategory = selectedCategory;
            if (selectedRootCategory) {
                this.selectedRootCategory = selectedRootCategory;
            }
        });

        Bus.$on('filter-panel-unselect-category', () => {
            this.selectedCategory = null;
            this.selectedRootCategory = null;
        });

        Bus.$on('filter-panel-unselect-subcategory', () => {
            this.selectedCategory = null;
        });

        Bus.$on('search-confirm', (searchText) => {
            this.searchText = searchText;
        });
    }
  
}
</script>

<style lang="scss">

.bread-crumb-container {

    height: 23px;
    // margin: 0 16px;
    vertical-align: middle;

    .bread-crumb {

        height: 23px;
        display: inline-block;
        vertical-align: middle;

        .crumb-prefix {
            line-height: 23px;
            cursor: pointer;
        }
        
        .highlight {
            color: #20A0FF;
        }

        .crumb-dropdown {
            i {
                font-size: 8px;
            }
        }

        .crumb-container {

            display: inline-block;
            border: 1px solid rgba(0, 0, 0, 0.16);
            border-radius: 2px;
            margin: 0 4px;
            vertical-align: middle;

            &:hover {
                border: 1px solid #20A0FF;
                cursor: pointer;

                .close i {
                    color: #20A0FF;
                }
            }

            .crumb {
                display: inline-block;
                height: 100%;
                padding: 2px 2px 2px 4px;
            }

            .close {

                display: inline-block;
                height: 100%;
                margin: 0;
                padding-right: 4px;

                i {
                    font-size: 14px;
                }
            }
        }

        .clear-filter {

            margin-left: 4px;

            &:hover {
                color: #20A0FF;
                cursor: pointer;
            }
        }
    }

    .search {
        display: inline-block;
    }
}

</style>
